<template>
  <div class="errorpage" id="bgstar" ref="bgstar">
    <img class="myimg" :src="img404" alt="" />
    <span
      v-for="(l, i) in spanNum"
      :key="i"
      class="spandot"
      :style="{
        left: l.x,
        top: l.y,
        animationDelay: l.rate + 's',
        transform: 'translate(' + l.scaler + ')',
        background: l.rgba,
      }"
    ></span>
    <div class="dao" @click="gotowhere()">
      <el-progress :duration=5 :indeterminate='true' :stroke-width='3' :width='50' type="circle" :percentage="percentage" >倒计时</el-progress>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, onUnmounted,watch} from "vue";
import img404 from "@/assets/images/four.jpg";
import {useRouter} from "vue-router"
var timer=null
export default {
  name: "404",
  setup(props, context) {
    const bgstar = ref(); //绑定ref
    const router=useRouter()
    const state = reactive({
      //绑定响应式数据
      spanNum: [],
      img404,
      percentage:0
    });
    onMounted(() => {
      console.log("组件初始化");
      spanInit();
      countdown();
    }),
      onUnmounted(() => {
        console.log("组件销毁");
      });

      const countdown=()=>{
          timer=setInterval(()=>{
              if(state.percentage<100){
                  state.percentage ++
              }else{
                  clearInterval(timer);
                  timer=null;
                  router.push({name:'login'})
              }
          },50)
      }
      const gotowhere=()=>{
          router.push({name:'login'})
      }
    const spanInit = () => {
      var width = document.getElementById("bgstar").clientWidth;
      var height = bgstar.value.clientHeight; //ref.value
      console.log(width, height);
      for (var i = 0; i < 3500; i++) {
        // 随机位置
        var x = Math.floor(Math.random() * width);
        var y = Math.floor(Math.random() * height);

        // 随机频率
        var rate = Math.random() * 2.5;

        // 随机大小
        var scaler = Math.random() * 1.5;

        // 随机颜色
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var a = Math.random() * 1;

        state.spanNum.push({
          x: x + "px",
          y: y + "px",
          rate,
          scaler,
          rgba: `rgba(${r},${g},${b},${a})`,
        });
      }
    };
    return {
      ...toRefs(state), //把数据挂载到组件上 //所有的setup必须返还
      bgstar,
      spanInit,
      gotowhere
    };
  },
};
</script>
<style lang="scss" scoped>
.errorpage {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  .dao {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    ::v-deep .van-circle__text {
      color: #fff !important;
    }
  }
  .myimg {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
  }
  .spandot {
    position: absolute;
    z-index: 100;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;
  }
  @keyframes flash {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.5;
    }
  }
}
</style>